1 files changed, 64 insertions, 0 deletions
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
new file mode 100644
index 0000000..ac978a2
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
@@ -0,0 +1,64 @@
+import { Icon, Row, Tab, TabList, Tabs, Text } from '@umami/react-zen';
+import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
+import { ChartPie, Clock, Eye, User } from '@/components/icons';
+import { Lightning } from '@/components/svg';
+
+export function WebsiteTabs() {
+  const website = useWebsite();
+  const { pathname, renderUrl } = useNavigation();
+  const { formatMessage, labels } = useMessages();
+
+  const links = [
+    {
+      id: 'overview',
+      label: formatMessage(labels.overview),
+      icon: <Eye />,
+      path: '',
+    },
+    {
+      id: 'events',
+      label: formatMessage(labels.events),
+      icon: <Lightning />,
+      path: '/events',
+    },
+    {
+      id: 'sessions',
+      label: formatMessage(labels.sessions),
+      icon: <User />,
+      path: '/sessions',
+    },
+    {
+      id: 'realtime',
+      label: formatMessage(labels.realtime),
+      icon: <Clock />,
+      path: '/realtime',
+    },
+    {
+      id: 'reports',
+      label: formatMessage(labels.reports),
+      icon: <ChartPie />,
+      path: '/reports',
+    },
+  ];
+
+  const selectedKey = links.find(({ path }) => path && pathname.includes(path))?.id || 'overview';
+
+  return (
+    <Row marginBottom="6">
+      <Tabs selectedKey={selectedKey}>
+        <TabList>
+          {links.map(({ id, label, icon, path }) => {
+            return (
+              <Tab key={id} id={id} href={renderUrl(`/websites/${website.id}${path}`)}>
+                <Row alignItems="center" gap>
+                  <Icon>{icon}</Icon>
+                  <Text>{label}</Text>
+                </Row>
+              </Tab>
+            );
+          })}
+        </TabList>
+      </Tabs>
+    </Row>
+  );
+}